<template>
  <!-- 搜索条件 -->
  <a-form layout="inline" class="accept_more_operate_moreForm details">
    <!-- 切换搜索条件 -->
    <div class="details_tabs">
      <a-tabs :activeKey="selectKey" @change="callback($event, true)">
        <a-tab-pane
          v-for="item in Tp_hearTypeList"
          :key="item.value"
          :tab="`${item.name} ${item.value in typeTotal ? typeTotal[String(item.value)] : 0}`"
        >
        </a-tab-pane>
      </a-tabs>
      <a-tabs v-if="childrenTabs.length > 0" :activeKey="sonKey" @change="callback($event, false)">
        <a-tab-pane
          v-for="item in childrenTabs"
          :key="item.value"
          :tab="`${item.name} ${item.value in typeTotal ? typeTotal[String(item.value)] : 0}`"
        >
        </a-tab-pane>
      </a-tabs>
    </div>
    <a-collapse v-model="collapseKey" class="accept_more_operate_moreForm_collapse" expandIconPosition="right">
      <a-collapse-panel key="1" style="font-weight: bold">
        <div slot="header" class="accept_more_operate_moreForm_collapse_head">
          <a-row :gutter="48" style="width: 100%">
            <a-col @click.stop="() => {}" :md="8" :sm="24">
              <a-form-item label="申请人：">
                <a-input v-model="queryParam.applyname" placeholder="请输入申请人" allowClear />
              </a-form-item>
            </a-col>
            <a-col @click.stop="() => {}" :md="8" :sm="24">
              <a-form-item label="被申请人：">
                <a-input v-model="queryParam.targetname" placeholder="请输入被申请人" allowClear />
              </a-form-item>
            </a-col>
            <a-col @click.stop="() => {}" :md="8" :sm="24">
              <a-form-item label="程序类型：">
                <a-select v-model="queryParam.proctype" style="width: 200px;font-weight: normal" placeholder="请选择程序类型" allowClear>
                  <a-select-option v-for="item in Tp_apptypeList" :key="item.value" :value="item.value">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <a-row :gutter="48" style="width: 100%" class="accept_more_operate_moreForm_collapse_body">
          <a-col @click.stop="() => {}" :md="8" :sm="24">
            <a-form-item label="来源：">
              <a-select v-model="queryParam.source" style="width: 220px;font-weight: normal" placeholder="请选择来源" allowClear>
                <a-select-option v-for="item in Tp_applysourceList" :key="item.value" :value="item.value">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col @click.stop="() => {}" :md="8" :sm="24">
            <a-form-item label="状态：">
              <a-select v-model="queryParam.isTodo" style="width: 200px" placeholder="请选择状态" allowClear>
                <a-select-option :value="3201"> 待处理 </a-select-option>
                <a-select-option :value="3200"> 已处理 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>
  </a-form>
</template>
<script>
import { Tp_apptypeList } from '@/enumeration/Tp_apptype.js'
import { Tp_applysourceList } from '@/enumeration/Tp_applysource'
import { Tp_hearTypeList, Tp_proctypeValue } from '@/enumeration/Tp_proctype.js'

const constSonKey = 6003613
export default {
  props: {
    queryParam: {
      type: Object,
      require: true,
    },
    // 分类统计数据
    typeTotal: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      sonKey: 6003613,
      selectKey: '',
      childrenTabs: [],
      Tp_hearTypeList: Tp_hearTypeList,
      Tp_applysourceList: Tp_applysourceList,
      Tp_apptypeList: Tp_apptypeList,
      collapseKey: ['1'], // 折叠面板key
    }
  },
  created() {},
  methods: {
    // 父组件调用, 重置查询条件
    f_reset() {
      this.sonKey = ''
      this.selectKey = ''
      console.log('重置', this.activeKey)
    },
    // 切换条件查询
    callback(val, isFather) {
      if(isFather) {
        this.selectKey = val
      } else {
        this.sonKey = val
      }
      // 赋值子tab
      this.Tp_hearTypeList.forEach((v) => {
        if (v.value == val) {
          this.childrenTabs = v.list || []
        }
      })
      if(val == 'investiga') {
        // val = constSonKey
        this.sonKey = constSonKey
      }
      // console.log('typeTotal', this.typeTotal)
      console.log('切换', val, isFather)
      if (val) {
        if(val == 'investiga') {
          this.$emit('f_setCondition', 'type', this.sonKey)
        } else {
          this.$emit('f_setCondition', 'type', val)
        }
        this.$emit('f_setCondition', 'pageNumber', 1)
        this.$emit('f_queryUndoTaskList', this.queryParam)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .ant-tabs-tab {
  font-weight: 800;
}
::v-deep .accept_more_operate_left {
  border: 1px solid red !important;
}
// .accept_more_operate_moreForm_collapse {
//   width: 80%;
//   margin-left: 10%;
// }
.details_tabs {
  // width: 1300px;
  // height: 100px;
  // float: left;
  // display: inline;
  // border: 1px solid blue !important;
}
.details {
  // width: 80%;
  // border: 1px solid red;
  // margin-left: 10%;
}
</style>
